<template>
  <view class="container">
    <!-- 自定义导航栏 -->
    <view class="custom-nav">
      <view class="nav-back" @click="handleBack">
        <text class="back-icon">←</text>
      </view>
      <text class="nav-title">矿主排行</text>
    </view>

    <!-- 当前账号信息 -->
    <view class="account-info">
      <text class="account-label">当前账号：</text>
      <text class="account-name">{{ currentAccountInfo.nickname || '未选择账号' }}</text>
    </view>

    <!-- 固定顶部按钮组 -->
    <view class="fixed-button-group">
      <view class="action-button refresh" @click="handleRefresh">重新查询</view>
      <view class="action-button toggle" 
            :class="{ 'pause': !isQueryPaused, 'resume': isQueryPaused }"
            @click="toggleQuery">
        {{ isQueryPaused ? '继续' : '暂停' }}
      </view>
      <view class="action-button copy" @click="handleCopy">复制昵称</view>
    </view>

    <!-- 主要内容区域 -->
    <view class="main-content">
      <!-- 列表区域 -->
      <view class="list-card">
        <view class="list-header">
          <view style="display: flex;justify-content: space-between;align-items: center;width: 100%;">
            <text class="list-title">排名列表</text>
            <text class="list-subtitle">共 {{ rankList.length }} 条记录</text>
          </view>
        </view>

        <!-- 搜索框和排名筛选 -->
        <view class="filter-box">
          <input type="text" v-model="searchText" placeholder="搜索昵称或ID" class="search-input" />
          <view class="rank-filter">
            <input 
              type="number" 
              v-model="rankFilter" 
              placeholder="输入排名筛选" 
              class="rank-input"
              @input="handleRankFilterChange"
            />
            <text class="filter-hint">显示排名低于此数值的矿主</text>
          </view>
        </view>

        <!-- 列表内容 -->
        <scroll-view 
          scroll-y 
          class="rank-list"
          :style="{ height: scrollHeight + 'px' }"
        >
          <view 
            class="rank-card" 
            v-for="(item, index) in filteredList" 
            :key="index"
          >
            <view class="rank-info">
              <view class="rank-header">
                <view class="rank-title">
                  <text class="rank-nickname">{{ item.nickname }}</text>
                  <text class="rank-id">ID: {{ item.roleId }}</text>
                </view>
                <text class="rank-position" :class="{ 'rank-negative': item.position === '-1' }">
                  {{ item.position === '-1' ? '未上榜' : `排名: ${item.position}` }}
                </text>
              </view>
              <view class="rank-details">
                <view class="resource-item">
                  <text class="resource-label">灵石</text>
                  <text class="resource-value">{{ formatNumber(item.ore || 0) }}</text>
                </view>
                <view class="resource-item">
                  <text class="resource-label">宝石</text>
                  <text class="resource-value">{{ formatNumber(item.bead || 0) }}</text>
                </view>
                <view class="resource-item">
                  <text class="resource-label">段位</text>
                  <text class="resource-value">{{ item.name || '未知' }}</text>
                </view>
              </view>
            </view>
          </view>

          <!-- 加载状态 -->
          <view class="loading-container" v-if="isLoading">
            <view class="loading-spinner"></view>
            <text class="loading-text">正在加载...</text>
          </view>

          <!-- 无数据状态 -->
          <view class="empty-state" v-else-if="!isLoading && filteredList.length === 0">
            <text class="empty-icon">📊</text>
            <text class="empty-text">暂无排名数据</text>
          </view>
        </scroll-view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, computed, onMounted, onUnmounted } from 'vue'
import { onShow, onHide } from '@dcloudio/uni-app'

// 排名列表数据
const rankList = ref([])
// 加载状态
const isLoading = ref(false)
// 滚动区域高度
const scrollHeight = ref(0)
// 查询状态
const isQueryPaused = ref(false)
const queryController = ref(null)
// 当前查询索引
const currentIndex = ref(0)
// 搜索文本
const searchText = ref('')

// 角色ID列表
const roleIds = ref([])

// 排名筛选值
const rankFilter = ref('')

// 当前账号信息
const currentAccountInfo = ref({
  nickname: '',
  uid: ''
})

// 灵石阈值等级定义
const ORE_LEVELS = [
  { level: 1, threshold: 100000, label: '1阶' },
  { level: 2, threshold: 300000, label: '2阶' },
  { level: 3, threshold: 600000, label: '3阶' },
  { level: 4, threshold: 1100000, label: '4阶' },
  { level: 5, threshold: 1900000, label: '5阶' },
  { level: 6, threshold: 2900000, label: '6阶' },
  { level: 7, threshold: 4900000, label: '7阶' },
  { level: 8, threshold: 7900000, label: '8阶' },
  { level: 9, threshold: 12900000, label: '9阶' },
  { level: 10, threshold: 22900000, label: '10阶' }
]

// 当前选择的灵石阈值等级
const selectedOreLevel = ref(4) // 默认选择4阶

// 计算当前阈值
const ORE_THRESHOLD = computed(() => {
  const level = ORE_LEVELS.find(l => l.level === selectedOreLevel.value)
  return level ? level.threshold : 1100000 // 默认值
})

// 计算总灵石数
const totalOre = computed(() => {
  return formatNumber(rankList.value.reduce((sum, item) => sum + parseInt(item.ore || 0), 0))
})

// 处理阈值变化
const handleThresholdChange = (e) => {
  const newLevel = parseInt(e.detail.value) + 1
  if (newLevel !== selectedOreLevel.value) {
    selectedOreLevel.value = newLevel
    // 清除存储的数据并重新查询
    uni.removeStorageSync('mine_rank_list')
    handleRefresh()
  }
}

// 获取当前账号信息
const getCurrentAccount = () => {
  const config = uni.getStorageSync('plunder_config')
  console.log('获取账号信息:', config ? '存在' : '不存在')
  if (!config) {
    currentAccountInfo.value = {
      nickname: '未登录',
      uid: ''
    }
    return null
  }
  try {
    const configData = typeof config === 'string' ? JSON.parse(config) : config
    console.log('解析账号信息:', configData)
    currentAccountInfo.value = {
      nickname: configData.nickname || '未知账号',
      uid: configData.uid || ''
    }
    return configData
  } catch (error) {
    console.error('解析账号信息失败:', error)
    currentAccountInfo.value = {
      nickname: '账号信息错误',
      uid: ''
    }
    return null
  }
}

// 格式化数字（添加千位分隔符）
const formatNumber = (num) => {
  return parseInt(num).toLocaleString('zh-CN')
}

// 计算统计数据
const successCount = computed(() => {
  return rankList.value.filter(item => !item.error).length
})

const failCount = computed(() => {
  return rankList.value.filter(item => item.error).length
})

const successRate = computed(() => {
  const total = rankList.value.length
  if (total === 0) return 0
  return ((successCount.value / total) * 100).toFixed(2)
})

// 过滤列表
const filteredList = computed(() => {
  let filtered = rankList.value

  // 应用排名筛选
  if (rankFilter.value) {
    const targetRank = parseInt(rankFilter.value)
    if (!isNaN(targetRank)) {
      filtered = filtered.filter(item => {
        const rank = parseInt(item.position)
        return !isNaN(rank) && (rank > targetRank || rank === -1)
      })
    }
  }

  // 应用搜索筛选
  if (searchText.value) {
    const searchLower = searchText.value.toLowerCase()
    filtered = filtered.filter(
      item =>
        item.nickname?.toLowerCase().includes(searchLower) ||
        item.roleId?.toString().includes(searchText.value)
    )
  }

  return filtered
})

// 保存查询状态到存储
const saveQueryState = () => {
  try {
    const state = {
      isPaused: isQueryPaused.value,
      currentIndex: currentIndex.value,
      rankList: rankList.value
    }
    uni.setStorageSync('mine_rank_query_state', JSON.stringify(state))
    console.log('保存查询状态:', { isPaused: isQueryPaused.value, currentIndex: currentIndex.value })
  } catch (error) {
    console.error('保存查询状态失败:', error)
  }
}

// 加载查询状态
const loadQueryState = () => {
  try {
    const stateStr = uni.getStorageSync('mine_rank_query_state')
    if (stateStr) {
      const state = JSON.parse(stateStr)
      isQueryPaused.value = state.isPaused
      currentIndex.value = state.currentIndex
      rankList.value = state.rankList
      console.log('加载查询状态:', { isPaused: state.isPaused, currentIndex: state.currentIndex })
      return true
    }
  } catch (error) {
    console.error('加载查询状态失败:', error)
  }
  return false
}

// 从存储中加载数据
const loadStoredData = () => {
  const storedRankList = uni.getStorageSync('mine_rank_list')
  if (storedRankList) {
    try {
      const list = typeof storedRankList === 'string' ? JSON.parse(storedRankList) : storedRankList
      rankList.value = list
      console.log('从存储中加载排名数据，数量:', list.length)
    } catch (error) {
      console.error('解析存储的排名数据失败:', error)
    }
  }
}

// 保存数据到存储
const saveDataToStorage = () => {
  try {
    uni.setStorageSync('mine_rank_list', JSON.stringify(rankList.value))
    console.log('保存排名数据到存储，数量:', rankList.value.length)
  } catch (error) {
    console.error('保存排名数据失败:', error)
  }
}

// 检查 AbortController 是否可用
const createAbortController = () => {
  if (typeof AbortController !== 'undefined') {
    return new AbortController()
  }
  return {
    signal: {},
    abort: () => {}
  }
}

// 修改获取系统信息设置滚动区域高度的逻辑
onMounted(() => {
  const systemInfo = uni.getSystemInfoSync()
  // 计算滚动区域高度：窗口高度 - 导航栏(88rpx) - 账号信息(56rpx) - 按钮组(64rpx) - 列表卡片内边距(48rpx) - 底部间距(24rpx)
  const topHeight = uni.upx2px(88 + 56 + 64 + 48 + 24)
  scrollHeight.value = systemInfo.windowHeight - topHeight
  
  // 获取当前账号信息
  getCurrentAccount()
  
  // 从存储中获取矿主列表
  const mineOwnerList = uni.getStorageSync('mine_owner_list')
  if (mineOwnerList) {
    try {
      const list = typeof mineOwnerList === 'string' ? JSON.parse(mineOwnerList) : mineOwnerList
      const newRoleIds = list.map(item => item.roleId)
      roleIds.value = newRoleIds
      
      // 尝试加载查询状态
      const hasQueryState = loadQueryState()
      if (hasQueryState) {
        // 如果有查询状态，检查是否需要继续查询
        if (!isQueryPaused.value && currentIndex.value < roleIds.value.length) {
          console.log('恢复查询，从索引', currentIndex.value, '继续')
          getRankList()
        }
        return
      }
      
      // 如果没有查询状态，尝试加载存储的排名数据
      const storedRankList = uni.getStorageSync('mine_rank_list')
      if (storedRankList) {
        try {
          const storedList = typeof storedRankList === 'string' ? JSON.parse(storedRankList) : storedRankList
          const storedRoleIds = storedList.map(item => item.roleId)
          if (JSON.stringify(newRoleIds) === JSON.stringify(storedRoleIds)) {
            rankList.value = storedList
            console.log('使用存储的排名数据，数量:', storedList.length)
            return
          }
        } catch (error) {
          console.error('解析存储的排名数据失败:', error)
        }
      }
      
      // 如果没有存储数据，开始新查询
      if (roleIds.value.length > 0) {
        console.log('开始新查询，矿主数量:', roleIds.value.length)
        getRankList()
      }
    } catch (error) {
      console.error('解析矿主列表失败:', error)
      uni.showToast({
        title: '获取矿主列表失败',
        icon: 'none'
      })
    }
  } else {
    uni.removeStorageSync('mine_rank_list')
    uni.removeStorageSync('mine_rank_query_state')
    rankList.value = []
    uni.showToast({
      title: '请先查询矿主列表',
      icon: 'none'
    })
  }
})

// 获取排名列表
const getRankList = async () => {
  if (isLoading.value || isQueryPaused.value) return
  isLoading.value = true

  try {
    // 确保开始新查询时清除旧数据
    if (currentIndex.value === 0) {
      rankList.value = []
      uni.removeStorageSync('mine_rank_list')
      console.log('开始新查询，清除旧数据')
    }

    queryController.value = createAbortController()
    const signal = queryController.value.signal

    // 获取当前选择的账号信息
    const currentAccount = getCurrentAccount()
    if (!currentAccount || !currentAccount.token || !currentAccount.uid) {
      uni.showModal({
        title: '提示',
        content: '请先选择账号并登录',
        showCancel: false,
        success: () => {
          uni.switchTab({
            url: '/pages/attack/index'
          })
        }
      })
      return
    }

    const token = currentAccount.token
    const uid = currentAccount.uid

    const url = "https://farm-api.lucklyworld.com/v8/api/game/bead/plunder/rank"
    const headers = {
      "User-Agent": "com.caike.lomo/4.2.6 (Linux; U; Android 12; zh-cn) (91416; 402060)bbcbce6e97449754",
      "Channel": "official",
      "DEVICEID": "",
      "ANDROIDID": "699e5ddaad221888",
      "oaid": "",
      "IMEI": "358022026118275",
      "test-encrypt": "0",
      "uid": uid,
      "token": token,
      "Content-Type": "application/json; charset=utf-8",
    }

    while (currentIndex.value < roleIds.value.length && !isQueryPaused.value) {
      const roleId = roleIds.value[currentIndex.value]
      console.log(`开始查询角色 ${roleId} 的排名，当前进度: ${currentIndex.value + 1}/${roleIds.value.length}`)

      try {
        const data = {
          next: 0,
          type: 2,
          roleId: parseInt(roleId)
        }

        const response = await uni.request({
          url,
          method: 'POST',
          header: headers,
          data,
          signal
        })

        if (isQueryPaused.value) {
          console.log('查询已暂停')
          break
        }

        if (response.statusCode === 401) {
          uni.showModal({
            title: '提示',
            content: '登录已过期，请重新登录',
            showCancel: false,
            success: () => {
              uni.switchTab({
                url: '/pages/attack/index'
              })
            }
          })
          break
        }

        const responseData = response.data
        if (responseData && responseData.nowUserInfo) {
          const userInfo = responseData.nowUserInfo
          rankList.value.push({
            roleId: roleId,
            position: userInfo.position || '未知',
            nickname: userInfo.nickname || '未知',
            ore: userInfo.ore || '0',
            bead: userInfo.bead || '0',
            name: userInfo.name || '未知'
          })
          // 每获取一条数据就保存一次
          saveDataToStorage()
        } else {
          rankList.value.push({
            roleId: roleId,
            error: '未找到用户信息'
          })
          saveDataToStorage()
        }

        currentIndex.value++
        await new Promise(resolve => setTimeout(resolve, 500))

      } catch (error) {
        if (error.name === 'AbortError') {
          console.log('查询被取消')
          break
        }
        console.error('查询失败:', error)
        rankList.value.push({
          roleId: roleId,
          error: error.message || '查询失败'
        })
        currentIndex.value++
        await new Promise(resolve => setTimeout(resolve, 1000))
      }
    }

    console.log('查询完成:', {
      总数量: roleIds.value.length,
      成功数量: successCount.value,
      失败数量: failCount.value,
      成功率: successRate.value + '%'
    })

  } catch (error) {
    console.error('查询过程发生错误:', error)
    uni.showModal({
      title: '提示',
      content: '查询失败，请稍后重试',
      showCancel: false
    })
  } finally {
    isLoading.value = false
    queryController.value = null
  }
}

// 修改暂停查询函数
const pauseQuery = () => {
  isQueryPaused.value = true
  if (queryController.value && typeof queryController.value.abort === 'function') {
    queryController.value.abort()
  }
  queryController.value = null
  // 保存查询状态
  saveQueryState()
  console.log('查询已暂停，当前索引:', currentIndex.value)
}

// 修改恢复查询函数
const resumeQuery = () => {
  isQueryPaused.value = false
  // 保存查询状态
  saveQueryState()
  console.log('查询已恢复，从索引', currentIndex.value, '继续')
  if (currentIndex.value < roleIds.value.length && !isLoading.value) {
    console.log('继续获取数据')
    getRankList()
  }
}

// 页面显示时获取账号信息
onShow(() => {
  // 获取当前账号信息
  getCurrentAccount()
  
  // 如果之前是暂停状态，保持暂停
  // 如果之前是查询状态，继续查询
  if (!isQueryPaused.value && currentIndex.value < roleIds.value.length && !isLoading.value) {
    console.log('页面显示，继续查询')
    getRankList()
  }
})

// 修改页面隐藏时的处理
onHide(() => {
  // 保存当前查询状态
  saveQueryState()
  // 暂停查询
  pauseQuery()
})

// 修改重新查询函数
const handleRefresh = () => {
  pauseQuery()
  currentIndex.value = 0
  rankList.value = []
  // 清除所有存储的数据
  uni.removeStorageSync('mine_rank_list')
  uni.removeStorageSync('mine_rank_query_state')
  console.log('清除所有数据，开始重新查询')
  isQueryPaused.value = false
  getRankList()
}

// 修改切换查询状态函数
const toggleQuery = () => {
  if (isQueryPaused.value) {
    resumeQuery()
  } else {
    pauseQuery()
  }
}

// 处理排名筛选变化
const handleRankFilterChange = (e) => {
  const value = e.detail.value
  // 确保输入的是非负数
  if (value && parseInt(value) < 0) {
    rankFilter.value = '0'
  }
}

// 复制所有筛选后的昵称
const handleCopy = () => {
  const dataToCopy = filteredList.value
  if (dataToCopy.length === 0) {
    uni.showToast({
      title: '没有可复制的数据',
      icon: 'none'
    })
    return
  }

  // 复制所有筛选后的昵称
  const nicknames = dataToCopy
    .map(item => item.nickname)
    .filter(name => name && name !== '未知')
    .join('\n')

  uni.setClipboardData({
    data: nicknames,
    success: () => {
      uni.showToast({
        title: `已复制${dataToCopy.length}个昵称`,
        icon: 'success'
      })
    },
    fail: () => {
      uni.showToast({
        title: '复制失败',
        icon: 'none'
      })
    }
  })
}

// 返回上一页
const handleBack = () => {
  uni.navigateBack();
};
</script>

<style>
.container {
  padding: 0;
  min-height: 100vh;
  background: linear-gradient(135deg, #f5f7fa 0%, #e4e7eb 100%);
  position: relative;
}

/* 主要内容区域样式 */
.main-content {
  padding-top: 208rpx; /* 88rpx(导航栏) + 56rpx(账号信息) + 64rpx(按钮组) */
  padding-bottom: 24rpx;
  box-sizing: border-box;
}

/* 自定义导航栏样式 */
.custom-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 88rpx;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  display: flex;
  align-items: center;
  padding: 0 24rpx;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
  z-index: 100;
}

.nav-back {
  width: 88rpx;
  height: 88rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

.back-icon {
  font-size: 40rpx;
  color: #333;
}

.nav-title {
  flex: 1;
  text-align: center;
  font-size: 32rpx;
  font-weight: 600;
  color: #333;
  margin-right: 88rpx; /* 为了保持标题居中，抵消返回按钮的宽度 */
}

/* 统计卡片样式 */
.stats-card {
  background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
  border-radius: 16rpx;
  padding: 24rpx;
  margin-top: 256rpx;
  margin-bottom: 24rpx;
  box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.05);
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20rpx;
  margin-top: 16rpx;
}

.stats-item {
  background: #ffffff;
  padding: 20rpx;
  border-radius: 12rpx;
  text-align: center;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.03);
}

.stats-item.highlight {
  background: linear-gradient(135deg, #4CAF50 0%, #45a049 100%);
}

.stats-item.error {
  background: linear-gradient(135deg, #ff6b6b 0%, #ff5252 100%);
}

.stats-value {
  font-size: 36rpx;
  font-weight: 600;
  color: #2c3e50;
  display: block;
}

.stats-item.highlight .stats-value,
.stats-item.error .stats-value {
  color: #ffffff;
}

.stats-label {
  font-size: 24rpx;
  color: #7f8c8d;
  margin-top: 4rpx;
  display: block;
}

.stats-item.highlight .stats-label,
.stats-item.error .stats-label {
  color: rgba(255, 255, 255, 0.9);
}

/* 列表卡片样式 */
.list-card {
  background: #ffffff;
  border-radius: 16rpx;
  padding: 24rpx;
  margin: 0 24rpx;
  box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.05);
}

.list-header {
  margin-bottom: 20rpx;
}

.list-title {
  font-size: 32rpx;
  font-weight: 600;
  color: #2c3e50;
  display: block;
}

.list-subtitle {
  font-size: 24rpx;
  color: #7f8c8d;
  margin-top: 4rpx;
  display: block;
}

/* 搜索框和排名筛选 */
.filter-box {
  margin-bottom: 20rpx;
  display: flex;
  flex-direction: column;
  gap: 16rpx;
}

.search-input {
  background: #f5f7fa;
  border-radius: 8rpx;
  padding: 16rpx 24rpx;
  font-size: 28rpx;
  color: #2c3e50;
  width: 100%;
  box-sizing: border-box;
  height: 40px;
}

.rank-filter {
  display: flex;
  flex-direction: column;
  gap: 8rpx;
}

.rank-input {
  background: #f5f7fa;
  border-radius: 8rpx;
  padding: 16rpx 24rpx;
  font-size: 28rpx;
  color: #2c3e50;
  width: 100%;
  box-sizing: border-box;
  height: 40px;
}

.filter-hint {
  font-size: 24rpx;
  color: #7f8c8d;
  padding-left: 8rpx;
}

/* 排名列表样式 */
.rank-list {
  margin-top: 24rpx;
}

.rank-card {
  background: #ffffff;
  border-radius: 12rpx;
  padding: 24rpx;
  margin-bottom: 16rpx;
  border: 1rpx solid #edf2f7;
  transition: all 0.3s ease;
}

.rank-card:active {
  background: #f8f9fa;
}

.rank-info {
  display: flex;
  flex-direction: column;
  gap: 16rpx;
}

.rank-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.rank-title {
  display: flex;
  flex-direction: column;
  gap: 8rpx;
}

.rank-nickname {
  font-size: 32rpx;
  font-weight: 500;
  color: #2c3e50;
}

.rank-id {
  font-size: 24rpx;
  color: #7f8c8d;
  background: #f5f7fa;
  padding: 4rpx 12rpx;
  border-radius: 6rpx;
  display: inline-block;
}

.rank-position {
  background: #4CAF50;
  color: #ffffff;
  padding: 8rpx 20rpx;
  border-radius: 8rpx;
  font-size: 26rpx;
  font-weight: 500;
}

.rank-position.rank-negative {
  background: #ff6b6b;
}

.rank-details {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16rpx;
  margin-top: 8rpx;
}

.resource-item {
  background: #f8f9fa;
  padding: 12rpx;
  border-radius: 8rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4rpx;
}

.resource-label {
  font-size: 24rpx;
  color: #7f8c8d;
}

.resource-value {
  font-size: 28rpx;
  font-weight: 500;
  color: #2c3e50;
}

/* 加载状态样式 */
.loading-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 40rpx 0;
}

.loading-spinner {
  width: 40rpx;
  height: 40rpx;
  border: 4rpx solid #f3f3f3;
  border-top: 4rpx solid #4CAF50;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin-bottom: 16rpx;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.loading-text {
  font-size: 24rpx;
  color: #7f8c8d;
}

/* 空状态样式 */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 60rpx 0;
}

.empty-icon {
  font-size: 64rpx;
  margin-bottom: 16rpx;
}

.empty-text {
  font-size: 28rpx;
  color: #7f8c8d;
}

/* 固定按钮组样式 */
.fixed-button-group {
  position: fixed;
  top: 144rpx; /* 88rpx(导航栏) + 56rpx(账号信息) */
  left: 50%;
  transform: translateX(-50%);
  width: 600rpx; /* 限制宽度 */
  height: 64rpx; /* 进一步减小高度 */
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12rpx; /* 使用gap控制间距 */
  padding: 8rpx 16rpx;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.08);
  border-radius: 32rpx; /* 整体圆角 */
  z-index: 98;
}

.fixed-button-group .action-button {
  flex: 0 1 auto; /* 不强制拉伸 */
  min-width: 120rpx; /* 最小宽度 */
  text-align: center;
  padding: 8rpx 16rpx;
  border-radius: 24rpx;
  font-size: 22rpx;
  font-weight: 500;
  transition: all 0.2s ease;
  white-space: nowrap;
}

.action-button.refresh {
  background: linear-gradient(135deg, #ff6b6b 0%, #ff5252 100%);
  color: #ffffff;
}

.action-button.toggle {
  background: linear-gradient(135deg, #4CAF50 0%, #45a049 100%);
  color: #ffffff;
}

.action-button.toggle.pause {
  background: linear-gradient(135deg, #ff9800 0%, #f57c00 100%);
}

.action-button.toggle.resume {
  background: linear-gradient(135deg, #2196F3 0%, #1976D2 100%);
}

.action-button.copy {
  background: linear-gradient(135deg, #4CAF50 0%, #45a049 100%);
  color: #ffffff;
}

.action-button:active {
  opacity: 0.9;
  transform: scale(0.96);
}

/* 响应式适配 */
@media screen and (min-width: 768px) {
  .container {
    max-width: 800rpx;
    margin: 0 auto;
  }

  .main-content {
    padding-top: 208rpx;
  }

  .custom-nav {
    max-width: 800rpx;
    left: 50%;
    transform: translateX(-50%);
    border-radius: 0 0 16rpx 16rpx;
  }

  .account-info,
  .fixed-button-group {
    max-width: 800rpx;
    left: 50%;
    transform: translateX(-50%);
  }

  .list-card {
    margin: 0;
  }

  .stats-grid {
    grid-template-columns: repeat(4, 1fr);
  }

  .filter-box {
    flex-direction: row;
    align-items: flex-end;
  }

  .search-input {
    flex: 2;
  }

  .rank-filter {
    flex: 1;
    margin-left: 16rpx;
  }

  .rank-card {
    padding: 32rpx;
  }

  .rank-title {
    flex-direction: row;
    align-items: center;
    gap: 16rpx;
  }

  .rank-details {
    grid-template-columns: repeat(3, 1fr);
    gap: 24rpx;
  }

  .resource-item {
    padding: 16rpx;
  }

  .resource-label {
    font-size: 26rpx;
  }

  .resource-value {
    font-size: 32rpx;
  }

  .fixed-button-group {
    width: 480rpx; /* 在大屏幕上稍微窄一点 */
  }

  .fixed-button-group .action-button {
    font-size: 24rpx;
    padding: 8rpx 20rpx;
  }
}

/* 账号信息样式 */
.account-info {
  position: fixed;
  top: 88rpx; /* 导航栏高度 */
  left: 0;
  right: 0;
  height: 56rpx;
  padding: 0 24rpx;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
  z-index: 99;
  display: flex;
  align-items: center;
  justify-content: center;
}

.account-label {
  font-size: 28rpx;
  color: #7f8c8d;
}

.account-name {
  font-size: 28rpx;
  color: #2c3e50;
  font-weight: 500;
  margin-left: 8rpx;
}
</style> 